import QtQuick 2.0;

Rectangle {
    id: pop_menu
    property int element_height: 14
    property QtObject old_item: null
    property QtObject old_view: null
    property QtObject old_text: null
    signal menu_item_clicked(int index)
    width: 200;
    height: 300;

    ListModel {
        id: classification_model
    }

    ListModel {
        id: list_model
    }

    function insert_classific_elemnt(index, object) {
        classification_model.insert(index, object)
    }

    function insert_element(index, object) {
        list_model.insert(index, object)
    }

    Component {
        id: pop_delegte
        Item {
            id: wrapper
            width: pop_menu.width; height: pop_menu.element_height
            x: 5
            Text {
                id: wrapper_text
                font.pixelSize: pop_menu.element_height - 4
                text: "  +" + name
                anchors.top: parent.top
            }

            MouseArea {
                anchors.fill: parent
                onEntered: wrapper.ListView.view.currentIndex = index
                hoverEnabled: true
                onClicked: {
                    if (old_item != null) {
                        old_item.height = pop_menu.element_height
                        old_text.text = "  +" + name
                        old_view.visible = false
                    }
                    old_item = view.currentItem
                    old_text = wrapper_text
                    old_view = wrapper_view
                    menu_item_clicked(index)
                    wrapper_text.text = "  -" + name
                    wrapper_view.visible = true
                    view.currentItem.height = wrapper_view.height + pop_menu.element_height + wrapper_view.spacing
                }
            }

            Component {
                id: wrapper_pop_delegte
                Item {
                    id: wrapper_wrapper
                    width: pop_menu.width; height: pop_menu.element_height
                    x: 5
                    Text {
                        id: wrapper_wrapper_text
                        font.pixelSize: pop_menu.element_height - 4
                        text: "     " + name
                        anchors.top: parent.top
                    }

                    MouseArea {
                        anchors.fill: parent
                        onEntered: wrapper_wrapper.ListView.view.currentIndex = index
                        acceptedButtons: Qt.LeftButton
                        hoverEnabled: true
                        onClicked: {
                            menu_item_clicked(index)
                        }
                    }
                }
            }

            Component {
                id: wrapper_highlight_bar
                Rectangle {
                    width: pop_menu.width - scrollBar.width; height: pop_menu.element_height + wrapper_view.spacing
                    color: "lightsteelblue"
                    y: wrapper_view.currentItem.y - wrapper_view.spacing / 2;
                    x: -wrapper_view.currentItem.x
                }
            }

            ListView {
                id: wrapper_view
                y: pop_menu.element_height + spacing
                height: list_model.count * pop_menu.element_height + (list_model.count - 1) * spacing
                focus: true

                model: list_model
                delegate: wrapper_pop_delegte
                highlight: wrapper_highlight_bar
                highlightFollowsCurrentItem: false

                spacing: 10
                visible: false
            }
        }
    }

    Component {
        id: highlight_bar
        Rectangle {
            width: pop_menu.width - scrollBar.width; height: pop_menu.element_height + view.spacing
            color: "steelblue"
            y: view.currentItem.y - view.spacing / 2;
        }
    }

    ListView {
        id: view
        anchors.fill: parent
        focus: true

        model: classification_model
        delegate: pop_delegte
        highlight: highlight_bar
        highlightFollowsCurrentItem: false

        spacing: 10
    }

    ScrollBar {
        id: scrollBar
        flickable: view;
    }

    Component.onCompleted: {
        classification_model.append({name: "hello world"})
    }
}
